<template>
	<view>
		<view class="dropdown">
				<u-dropdown height="100" ref="uDropdown" :border-bottom="true">
					<u-dropdown-item v-model="grader_val" title="年级" :options="nianjiList" @change="nianjichange"></u-dropdown-item>
					<u-dropdown-item title="班级">
							<view class="slot-content">
								<view class="item-box">
									<view class="item" :class="[item.active ? 'active' : '']" @tap="tagClick(index)" v-for="(item, index) in banjilist" :key="index">
										{{item.banji_name}}
									</view>
								</view>
								<u-button type="primary" @click="closeDropdown">确定</u-button>
							</view>
					</u-dropdown-item>
				</u-dropdown>
		</view>
		
		<view class="body">
			<view class="body-li" v-for="(item,index) in list" :key="index">
					<view class="body-li-l">
						<view class="li-xm">
							姓名:{{item.stu_name}} 
						</view>
						<view class="body-banji">班级：{{item.banji_name}} <text style="padding-left: 25rpx;">年级：{{item.nianji_name}}</text></view>
					</view>
					<view class="body-li-r">
						<view class="">
							 {{item.total_money}}
						</view>
						<!-- <view class="body-banji">支付时间：{{item.pay_time | date('yyyy-mm-dd hh:MM' )}}</view> -->
					</view>
			</view>
		</view>
		<view class="total-fee" v-if="list.length">
			总收入:<text class="total-fee-i">{{total_money}}</text>
		</view>
		
		<view style="margin-top: 300rpx;" class="" v-if="list.length==0">
			<u-empty text="订单为空" mode="data" ></u-empty>
		</view>
		
		<download-excel  :data="list" :fields="json_fields"  name="excel.xls" class="excel"> 导出excel </download-excel>
	</view>
</template>

<script>
	export default {		
		components:{
			
		},
		data() {
			return {
				keyword:"",	
				baseurl:"",
				grader_val:"",
				banji_ids:"",
				banjilist:[],
				nianjiList: [],
				list:[],
				total_money:0,
				//列出自己需要导出的字段
				json_fields: {
					//生成excel的字段：导出数据的字段
					'学生姓名': 'stu_name',
					'年级': 'nianji_name',
					'班级': 'banji_name',
					'支付金额': 'total_money',
					'支付时间' : {
						field: 'pay_time',
						callback: (value) => {
							return this.$u.timeFormat(value, 'yyyy-mm-dd hh时MM分ss秒');
							//return `Landline Phone - ${value}`;
						}
					}
				},
			}
		},
		onLoad() {
			    this.baseurl =  this.$u.http.config.baseUrl
				//年级
				this.studentGradeBanji();
				//班级
				this.gradeBanjiList();
				//订单列表
				this.orderList();
				
		},
		onReady() {
		},
		methods: {
			//年级改变
			nianjichange(){
				this.gradeBanjiList();
				this.orderList();
			},
			//内部年级列表
			studentGradeBanji(){
				this.$u.post('/api/school/studentGradeBanji',{}).then(res => {
					    this.nianjiList = res.nianji.map((item,index,arr)=>{
						    return {value: item.id,label:item.nianji_name }
						})
				});	
			},
			//内部班级
			gradeBanjiList(){
			  	this.$u.post('/api/school/gradeBanjiList',{
					nianji_id: this.grader_val
				}).then(res => {
			  			this.banjilist = res.nianjiList;	
			  	});	
			},
			//订单列表
			orderList(){
				let parms = {
					nianji_id: this.grader_val,
					insidebanji_ids: this.banji_ids
				}
				this.$u.post('/api/school/insideOrder',parms).then(res => {
					    this.list = res.data
						this.downfun()
						this.total_money = res.total_money
				});	
			},
			//关闭Dropdown
			closeDropdown() {
				let banji_id_arr = this.banjilist.map((item,index,arr)=>{
					if(item.active){
						return item.id;
					}
				})
				this.banji_ids = banji_id_arr.join();
				this.orderList();
				this.$refs.uDropdown.close();
			},
			//选择班级
			tagClick(index) {
				this.banjilist[index].active = !this.banjilist[index].active;
				this.$forceUpdate()
			},
			search(){
					//老师
					this.$u.post('/api/member/teacherlist', {keyword:this.keyword
							}).then(res => {
						    this.teacherlist = res;			
					});		
			},
			//导出
			downfun(){
				let list = this.list
				// let downlist = [
				// 	stu_name
				// ]
			},
			//提交
			 submit() {
				let that  = this; 

			 }

		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #F3F4F6;
	}
  .dropdown{
	  background-color: #fff;
	  .slot-content {
	  	background-color: #FFFFFF;
	  	padding: 24rpx;
	  	
	  	.item-box {
	  		margin-bottom: 50rpx;
	  		display: flex;
	  		flex-wrap: wrap;
	  		justify-content: space-between;
	  		
	  		.item {
	  			border: 1px solid $u-type-primary;
	  			color: $u-type-primary;
	  			padding: 8rpx 40rpx;
	  			border-radius: 100rpx;
	  			margin-top: 30rpx;
	  		}
	  		
	  		.active {
	  			color: #FFFFFF;
	  			background-color: $u-type-primary;
	  		}
	  	}
	  }
  }
  
  .total-fee{
	  line-height: 100rpx;
	  text-align: right;
	  padding-right: 30rpx;
	  background-color: #fff;
	  font-size: 26rpx;
	  .total-fee-i{
		  color:#aa0000;
		  padding-left:10rpx;
		   font-size: 30rpx;
		  
	  }
  }
  .body{
	  background-color: #fff;
	  margin-top: 0rpx;
	  overflow: hidden;
  }
  .body-li{
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	  border-bottom: 2rpx solid #ebebeb;
	  margin: 0 30rpx;
	  padding: 30rpx 0;
	  .body-li-l{
		  .li-xm{
			  font-size: 26rpx;
			  line-height: 50rpx;
			  color: #000;
			  
		  }
		  .body-banji{
			  padding-top: 5rpx;
			   color: #999;
			   padding-left: 0rpx;
			   font-size: 24rpx;
		  }
	  }
	  .body-li-r{
		  color: #aa0000;
		  font-size: 26rpx;
	  }
  }
  
  .excel{
	  margin:  100rpx;
	  height: 50rpx;
	  line-height: 50rpx;
	  text-align: center;
	      color: #fff;
	      background-color: #2979ff;
	      padding: 8rpx 0rpx;
	      border-radius: 50px;
  }
  
</style>
